<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <style>
            *{margin: 0px; padding: 0px}
            #div1{width: 300px; height: 300px; border: 1px solid black; position: relative; display: none}
            #close{position: absolute; right: 0px; top: 0px}

        </style>
        <script src = 'jquery-1.10.1.min.js'></script>
        <script>
            $(function(){
                //计算居中的top和left值
                var top = $(window).scrollTop() + ($(window).height() - $("#div1").outerHeight(true)) / 2;
                var left = ($(window).width() - $("#div1").outerWidth(true)) / 2;

                $("#div1").css({
                    left: left,
                    top: top
                })

                $(window).on("scroll resize", function(){
                    var top = $(window).scrollTop() + ($(window).height() - $("#div1").outerHeight(true)) / 2;
                    var left = ($(window).width() - $("#div1").outerWidth(true)) / 2;

                    $("#div1").css({
                        left: left,
                        top: top
                    })
                })



                $("#issue").click(function(){
                    $("#div1").css("display", 'block');
                })

                $("#close").click(function(){
                    $("#div1").css("display", 'none');
                })
            })
        </script>
    </head>
    <body style = 'height: 3000px'>
        <button id = 'issue'>发布</button>
        <div id = 'div1'>
            <input type="text" placeholder="用户名"/>
            <input type="text" placeholder="密码"/>
            <div id = 'close'>X</div>
        </div>
    </body>
</html>